<template>
  <div style="height: calc(100vh - 52px);" class="bg-white">
    <NavBar style="border-bottom: 1px solid #fffdef">
      <template v-slot:center>
        <div class="font-title text-center pr-3">我的</div>
      </template>
    </NavBar>
<!--    导航栏下面第一部分-->
    <router-link class="display-flex person" :to="userInfo._id?'/userinfo':'/login'">
      <div class="iconPerson">
        <i class="iconfont icon-geren"></i>
      </div>
      <div class="white pt-3 pl-2 body flex-1">
        <div class="font-xxl font-weight pb-1" v-if="!userInfo.phone">
          <span>{{userInfo.name?userInfo.name :'登录/注册'}}</span>
        </div>
        <div class="iconArrow"><i class="iconfont icon-jiantou"></i></div>
        <div class="Nophone">
          <i class="iconfont icon-shouji"></i>
          <span class="font-xm pl-1">{{userInfo.phone?userInfo.phone:'暂无绑定手机号'}}</span>
        </div>
      </div>
    </router-link>
<!--    导航栏下面第二部分-->
    <div class="person-info display-flex  text-center border-b">
      <div class="pt-2 pb-2 ">
        <span class="orange-1 font-number font-weight">0.00</span>
        <span class="font-xm black">元</span>
        <p class="font-xm grey-2">我的余额</p>
      </div>
      <div class="pt-2 pb-2 ">
        <span class="red font-number font-weight">0</span>
        <span class="font-xm black">个</span>
        <p class="font-xm grey-2">我的优惠</p>
      </div>
      <div class="pt-2 pb-2 ">
        <span class="green-1 font-number font-weight">0</span>
        <span class="font-xm black">分</span>
        <p class="font-xm grey-2">我的积分</p>
      </div>
    </div>
<!--    导航栏下面第三部分-->
    <div class="service">
      <div class="display-flex border-b p-3 ai-center">
        <i class="iconfont icon-icon_dingdan"></i>
        <div class="font-xl flex-1 black pl-2">我的订单</div>
        <div class="iconArrow"><i class="iconfont icon-jiantou"></i></div>
      </div>
      <div class="display-flex border-b p-3 ai-center">
        <i class="iconfont icon-jifen5" style="color: #ff5f3e"></i>
        <div class="font-xl flex-1 black pl-2">积分商城</div>
        <div class="iconArrow"><i class="iconfont icon-jiantou"></i></div>
      </div>
      <div class="display-flex border-b p-3 ai-center">
        <i class="iconfont icon-huiyuan" style="color: #f90"></i>
        <div class="font-xl flex-1 black pl-2">硅谷外卖会员卡</div>
        <div class="iconArrow"><i class="iconfont icon-jiantou"></i></div>
      </div>
      <div class="display-flex border-b p-3 ai-center">
        <i class="iconfont icon-fuwuzhongxin"></i>
        <div class="font-xl flex-1 black pl-2">服务中心</div>
        <div class="iconArrow"><i class="iconfont icon-jiantou"></i></div>
      </div>
      <div v-if="userInfo._id">
        <button class="mt-2 bg-red p-2 font-xxl white font-weight" style="width: 100%;height: 42px;" @click="exit">退出</button>
      </div>
    </div>
  </div>
</template>

<script>
  import NavBar from "../../components/NavBar/NavBar";
  import {REST_USER_INFO} from "../../store/mutation-types";
export default {
  name: 'Person',
  components:{
    NavBar
  },
  data(){
    return {
      userInfo:{
        _id:Number
      }
    }
  },
  created() {
    this.getUserInfo()
  },
  methods:{
    getUserInfo(){
      this.userInfo = this.$store.state.userinfo?this.$store.state.userinfo:{}
      console.log(this.userInfo._id)
    },
    async exit(){
     const res = await this.$http.get(`http://localhost:4000/logout`)
      console.log(res)
      if(res.data.code === 0){
        this.$store.commit(REST_USER_INFO)
        this.$router.replace(`/home`)
      }
    }
  }
}
</script>

<style lang="scss">
  .person{
  background-color: #02a774;
  padding: 6px 18px 0 16px;
  .iconPerson{
    .iconfont{
      color: #7e8c8d;
      font-size: 57px;
      z-index: 4;
    }
  }
  .body{
    position: relative;
    .iconArrow{
      .iconfont {
        position: absolute;
        right: 0;
        top: 38%;
        font-size: 6px;
      }
    }
  }
  .Nophone{
    .iconfont {
      font-size: 16px;
    }
  }

}
  .person-info{
    div {
      width: 33%;
      border-right: 1px solid #f1f1f1;
      &:last-child{
        border-right: none;
      }
    }
  }
  .service{
    .iconfont{
      color: #02a774;
      font-size: 20px;
    }
    .iconArrow{
      position: relative;
      .iconfont{
        position: absolute;
        right: 0;
        top: -8px;
        font-size: 10px;
        color: #bbb;
      }
    }
  }

</style>
